<!--  -->
<template>
<div class="grademanagement">
<el-row class="buttom">
    <el-button type="primary" round class="buttom-left"
    @click="dialogTableVisible = true">学生查询</el-button>
<el-button type="primary" round  @click="electgrade()">同步成绩</el-button>
</el-row>
<el-table
       
      :data="tableData"
       align="center"
       ref="multipleTable"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange">
    <el-table-column
     align="center"
      type="selection"
      width="55">
    </el-table-column>
      <el-table-column
       align="center"
      type="index"
       label="序号"
      :index="indexMethod"
      width="100">
    </el-table-column>
      
      <el-table-column
       align="center"
        prop="name"
        label="名称"
       >
      </el-table-column>
      <el-table-column
       align="center"
        prop="type"
        label="类别">
      </el-table-column>
      <el-table-column
       align="center"
        prop="oriented"
        label="面向对象">
      </el-table-column>
      <el-table-column
       align="center"
        prop="data3"
        label="考试时间"
        width="120"
       >
      </el-table-column>
       <el-table-column
      fixed="right"
      label="统计  过线人数/总人数"
      width="100"
      align="center">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">{{grade}}</el-button>
        <span  @click="dialogTableVisible = true">/{{addnum}}</span>
      </template>
    </el-table-column>
    </el-table>
    <el-dialog title="学生成绩单"  :visible.sync="dialogTableVisible" :modal="false">
  <el-table :data="gradearr" >
    <el-table-column property="name" label="考试名称" ></el-table-column>
    <el-table-column property="id" label="准考证号" ></el-table-column>
    <el-table-column property="numberid" label="身份证号"></el-table-column>
    <el-table-column property="studentname" label="姓名"></el-table-column>
    <el-table-column property="grade" label="成绩"></el-table-column>
  </el-table>
</el-dialog>



</div>

</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
//import引入的组件需要注入到对象中才能使用
components: {},
 data() {
        return {
        dialogTableVisible: false,
        grades:"",
 multipleSelection: [],
          gradearr:[],
          tableData: [{
              name:"普通话等级考试",
              type:"二级",
              oriented:"中二|中三",
              data3:`020-10-9(14:00—16:00)`,   
          },
          {
              name:"国家计算机二级考试",
              type:"Access",
              oriented:"中二|中三",
              data3:`020-10-9(14:00—16:00)`,   
          }, 
          {
              name:"大学英语等级考试",
              type:"CET4",
              oriented:"中二|中三",
              data3:`020-10-9(14:00—16:00)`,   
          },]
        }



      },
    
//监听属性 类似于data概念
computed: {
  addnum:{
    get:function(){
      return this.gradearr.length
    }
  },
  grade:{
    get:function(){
      return this.grades
    }
  }
},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
     indexMethod(index) {
        return index+1;
      },
     handleSelectionChange(val) {
        this.multipleSelection = val;
    
    },
     electgrade(){
          this.$http.get("/example/1611732460493",{}
      ).then( res => {
          this.gradearr=res.data;
          var newArr =this.gradearr.filter(function(item){
            if(item.grade>60){return true}
        })
        this.grades=newArr.length
      }
      )}
},
//生命周期 - 创建完成（可以访问当前this实例）
created() {
this.electgrade()
},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {

},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='less'  scoped>
.breadcrumb{
    font-size: 20px;
}
.buttom{
    float: right;
    margin-top: 20px;
    margin-bottom: 20px;
}
.buttom-left{
    margin-right: 20px;
    
}


</style>